/*
 * Wire
 * Copyright (C) 2018 Wire Swiss GmbH
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program. If not, see http://www.gnu.org/licenses/.
 *
 */

#start-ui {
  .left-list-container;
  z-index: 1;

  &.left-list-is-visible {
    .start-ui-transition-fadein;
  }

  &:not(left-list-is-visible) {
    .start-ui-transition-fadeout;
  }

  group-list,
  top-people {
    & > div {
      padding: 0 16px;
    }
  }
}

.start-ui-header {
  background-color: rgba(255, 255, 255, 0.08);
  padding: 8px;
  &.start-ui-header-integrations {
    padding-bottom: 0;
    margin-bottom: -1px;
  }
}

.start-ui-header-icons {
  position: absolute;
  top: 6px;
  right: 0;
}

.start-ui-header-icon {
  position: absolute;
  right: 0;
}

.start-ui-list-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  overflow: hidden;
}

.start-ui-list {
  flex: 1 1;
  position: relative;
  overflow-y: scroll;
  overflow-x: hidden;
}

.start-ui-list-spinner {
  .full-screen;
  display: flex;
  justify-content: center;
  align-items: center;

  .icon-spinner {
    font-size: @font-size-xl;
  }
}

.start-ui-list-tabs {
  display: flex;
  height: 44px;
  padding: 0 8px;

  .start-ui-list-tab {
    display: flex;
    align-items: center;
    flex-grow: 1;
    justify-content: center;
    border-bottom: 1px solid transparent;
    opacity: 0.56;
    color: #fff;
    cursor: pointer;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;

    &.active {
      border-bottom-color: #fff;
      opacity: 1;
      cursor: default;
    }
  }
}

.start-ui-create-group,
.start-ui-create-guest-room,
.start-ui-invite-people {
  position: relative;
  padding: 0;
  margin: 0;
  overflow: hidden;
  .left-list-item {
    height: 56px;
    min-height: 56px;
    line-height: 56px;
  }

  .left-column {
    width: 60px;
  }

  .center-column {
    margin-right: 16px;
  }
}

.start-ui-list-top-people {
  overflow: hidden;

  .search-list-item {
    margin-right: 20px;

    &:nth-child(3n) {
      margin-right: 0;
    }
    &:nth-last-child(-n + 3) {
      margin-bottom: 0;
    }
  }
}

.start-ui-no-contacts,
.start-ui-no-search-results {
  text-align: center;
  line-height: 24px;
  margin-top: 40px;
  margin-bottom: 16px;
  white-space: pre;
}

.start-ui-list-header {
  .label-bold-xs();
  display: block;
  line-height: 24px;
  margin-left: 16px;
  margin-top: 24px;
}

.start-ui-list-header-connections,
.start-ui-list-header-contacts,
.start-ui-list-header-top-people {
  margin-top: 16px;
}

.start-ui-import {
  .accent-background-color();
  align-items: center;
  cursor: pointer;
  display: flex;
  flex: 0 0 auto;
  line-height: @conversation-input-min-height;
  height: @conversation-input-min-height;
}

.start-ui-import-icon {
  margin: 0 16px;
}

.start-ui-user-bubble {
  user-profile,
  .start-ui-service {
    .bubble-content();
    background: #fff;
    border-radius: 4px;
    color: @graphite-dark;
    margin: -@bubble-border-radius;
    position: relative;
  }

  .start-ui-service-body {
    display: flex;
    flex-basis: 104px;
    flex-direction: column;
    flex-grow: 1;
    border-radius: 4px;
    padding: 16px;
    background-color: @app-bg;
  }

  .start-ui-service-button {
    .button();
    width: 100%;
    height: 48px;
  }

  .start-ui-service-conversations {
    flex-grow: 1;
    flex-basis: 336px;
    display: flex;
    flex-direction: column;
    border-radius: 4px;

    .start-ui-service-conversations-input {
      margin: 8px 8px 0;
    }

    .start-ui-service-conversations-create {
      display: flex;
      align-items: center;
      height: 56px;
      cursor: pointer;

      .icon-plus {
        width: 60px;
        text-align: center;
      }

      .start-ui-service-conversations-create-text {
        font-size: 14px;
        font-weight: 400;
      }
    }

    .start-ui-service-conversations-list {
      height: 296px;
    }
  }

  .start-ui-service-details {
    display: flex;
  }

  .start-ui-service-details-content {
    margin-left: 16px;
  }

  .start-ui-service-description {
    font-size: 14px;
    margin-top: 16px;
    padding: 8px;
  }

  .start-ui-service-header {
    flex-basis: 48px;
    padding: 16px;
    display: flex;
  }

  .start-ui-service-footer {
    padding: 24px;
  }

  .start-ui-service-name {
    font-size: 24px;
    line-height: 32px;
    font-weight: @font-weight-regular;
  }

  .start-ui-service-provider {
    margin-top: 4px;
    font-size: 12px;
    line-height: 16px;
    opacity: 0.56;
  }

  &.start-ui-service-bubble.bubble-left-top,
  &.start-ui-service-bubble.bubble-left,
  &.start-ui-service-bubble-conversation-list.bubble-left-top {
    &:before {
      background-color: @app-bg;
    }
    &:after {
      background: linear-gradient(-45deg, @app-bg 0%, @app-bg 50%, transparent 50%, transparent 100%);
    }
  }
}

.start-ui-import-container {
  display: flex;
  height: 100%;
  align-items: center;
  margin-left: 24px;
  margin-right: 24px;
}

.start-ui-import-headline {
  font-size: @font-size-lg;
  font-weight: normal;
  margin-top: 24px;
  margin-bottom: 24px;
}

.start-ui-import-buttons {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.start-ui-import-buttons-icon {
  background-color: #fff;
  border: 1px solid rgba(141, 152, 159, 0.16);
  border-radius: 4px;
  color: @graphite-dark;
  display: inline-block;
  margin-right: 16px;
  width: 24px;
  height: 24px;
  padding: 3px;
}

.start-ui-import-detail {
  font-size: @font-size-xs;
  line-height: @line-height-sm;
  margin-bottom: 16px;
  margin-top: 16px;
}
